<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>个人中心</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <style>
          html, body {width: 100%;min-height: 100%;background: #ffffff;}
          .aui-active .aui-bar-tab-label{
            color: #f5a51c
          }
          .login {height:240px;background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);/*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/position: relative;}
      	.login .personal_logo {width: 4rem;height: 4rem;border-radius: 50%;margin: 0 auto 9px;/*position: absolute; top: 60px; left: 20px;*/}
      		.login .userinfo {position: absolute; top: 60px;text-align: center; left: 0; right: 0;}
      		.login .userinfo .title {font-size: 0.8rem; color: #fff;}

      		/* 设置条目 */
      		.item {height: 3rem;line-height: 3rem;padding-left: 0.7rem;background-color: #fff;}
      		.item_ico {float: left;width: 2.3rem;padding: 0.7rem 0.7rem 0.7rem 0;}
      		.item_arrow {float: right;width: 1.5rem;padding: 1rem 0.7rem 1rem 0;}
      		.item span {font-size: 0.7rem;}
          .userInfoInput{
            background:#f2f2f2;
            color:#1a1a1a;
          }
          .userInfoZhuyi{
            font-size:14px;
            padding:0.75rem;
          }
          .userInfoBtn{
            margin-top:20px;
            padding:0 0.75rem;
          }
          .userInfoBtn a{
            display: block;
            width: 100%;
            height: 45px;
            line-height: 45px;
            text-align: center;
            border-radius: 50px;
            background: #f3c472;
            color:#fff;
            font-size:16px;
            font-weight:600;
          }
          .boxShow{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99999;
            display: none;
          }
          .boxShow_bg{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            background: #000;
            opacity: 0.6;
            -moz-opacity: 0.6;
            -khtml-opacity: 0.6;
            -webkit-opacity: 0.6;
            filter: alpha(opacity=60);
          }
          .boxShow_con{
            position: absolute;
    width: 100%;
    left: 0;
    bottom: 10px;
    padding: 0 0.75rem;
          }
          .boxShow_con_cancel{
                margin-top: 10px;
          }
          .boxShow_con_cancel a{
            width: 100%;
height: 45px;
background: #fff;
font-size: 14px;
color: #222;
line-height: 45px;
text-align: center;
border-radius: 10px;
          }
          .boxShow_con_content{
            background: #fff;
            border-radius: 10px;
          }
          .boxShow_con_content1{
            height: 55px;
line-height: 55px;
text-align: center;
          }
          .boxShow_con_content2{
            height: 55px;
          line-height: 55px;
          text-align: center;
          border-top:1px solid #eee;
          }


          [v-cloak] {
              display: none;
          }
      </style>
  </head>
  <body>
<div id="app" >

  <div class="boxShow">
    <div class="boxShow_bg"></div>
    <div class="boxShow_con">
         <div class="boxShow_con_content">
            <div class="boxShow_con_content1">确认退出登录</div>
            <div class="boxShow_con_content2">
              <a href="##">退出登录</a>
            </div>
         </div>
         <div class="boxShow_con_cancel">
           <a href="##">取消</a>
         </div>
    </div>
  </div>
  <div class="aui-refresh-content">


    <div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list">

        <li class="aui-list-item userInfoInput">
            <div class="aui-media-list-item-inner">
              <div class="aui-list-item-inner">
                  原密码
              </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner">
                    <input type="text" placeholder="原密码">
                </div>
            </div>
        </li>
        <li class="aui-list-item  userInfoInput">
            <div class="aui-media-list-item-inner">
              <div class="aui-list-item-inner">
                  新密码
              </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-media-list-item-inner">
              <div class="aui-list-item-inner">
                  <input type="text" placeholder="新密码">
              </div>
            </div>
        </li>
        <li class="aui-list-item  userInfoInput">
            <div class="aui-media-list-item-inner">
              <div class="aui-list-item-inner userInfoInput">
                  验证新密码
              </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-media-list-item-inner">
              <div class="aui-list-item-inner">
                  <input type="text" placeholder="请再次输入新密码">
              </div>
            </div>
        </li>
    </ul>
    <div class="userInfoZhuyi">必须是6-20个英文字母、数字或符合（除空格键），且字母、数 字和标点符号至少包含两种。若包含字母，请注意区分大小写。</div>
    <div class="userInfoBtn"><a href="##">确定</a></div>
</div>

  <div>




</div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript">

      function openWinInfo(type){
        api.openWin({
            name: 'type',
            url: './userInfo.html',
            pageParam: {
                name: 'test'
            }
        });

      }


      apiready = function(){



        setRefresh()


      };


      //刷新
      function setRefresh() {
          var pullRefresh = new auiPullToRefresh({
              container: document.querySelector('.aui-refresh-content'),
              triggerDistance: 100
          }, function(ret) {

              if (ret.status == "success") {
                  setTimeout(function() {
                      pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                  }, 1500)
              }
          })
      }


  </script>
  </html>
